<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="box">
    <!-- -->
        <div class="nav-bar">
            <div @click="onClickLeft()">
            <i class="iconfont icon-arrow-left-full"> </i> </div>
            <div class="van-nav-bar__title">忘记密码</div>
        </div>
       <div class="forget_div">
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
  >
  <!-- 获取邮箱 -->
    <el-form-item  prop="email" class="email_div">
      <el-input v-model="ruleForm.password"  autocomplete="off" placeholder="请设置新密码"/>
    </el-form-item>
<!-- 邮箱验证码 -->
    <el-form-item  prop="email" class="code_div">
      <el-input v-model="ruleForm.new_pwd"  autocomplete="off" placeholder="请再次确定密码"/>
    </el-form-item>
    <el-form-item>
    </el-form-item>
  </el-form>
       </div>
       <footer >
        <el-button type="primary"  size="medium" plain class="btn"  @click="submitForm(ruleFormRef)">完成</el-button>
       </footer>
       
    </div>
</template>
<script lang='ts' setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { update_password } from '@/api';
const onClickLeft = () => {
    history.back();
};
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  password: '',
  new_pwd:'',
 
})
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入该项'))
  } else {
    callback()
  }
}


const rules = reactive<FormRules<typeof ruleForm>>({
  password: [{ validator: validatePass, trigger: 'blur' }],
  new_pwd: [{ validator: validatePass, trigger: 'blur' }],
})

//提交表单
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('success!')
//非空校验
if(ruleForm.password===""||ruleForm.new_pwd==="")
{
    ElMessage({
        message: '密码不能为空',
        type: 'error'
      })
}else{
const email=JSON.parse(sessionStorage.getItem('email') as any)
//获取新密码
// modify
let params={
    email:email,
    new_pwd:ruleForm.new_pwd,
    password:ruleForm.password,

}
update_password(params).then(res=>{
    console.log(res) 
    if(res.data.code===200)
    {
        ElMessage({
            message:res.data.msg,
            type: 'success'
          })
          setTimeout(() => {
            location.href = '/login';
          }, 200);

    }else{
        ElMessage({
            message:res.data.msg,
            type: 'error'
          })
    }

})
}



        //密码修改成功跳转登录页

    } else {
      console.log('失败!')
    }
  })
}


</script>
<style scoped lang="scss">
.box{
    width: 100%;
    height: 100vh;
    background-color:#3087ea;
    .nav-bar{
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        color: #fff;
        .van-nav-bar__title{
            color: #fff;
        }
}
.forget_div{
   margin-top: 110px;
   border-radius: 5px 5px 5px 5px;
 margin-left: 5%;
    width: 90%;
    height: 200px;
    background-color: #fff;
    

}
.demo-ruleForm{
  width: 100%;
    height: 200px;
    padding-top: 30px;
}

   
footer{
    width: 100%;
    height: 60px;
   //页面最下面
   position: fixed;  
    position: absolute;
    bottom: 20px;
}
.btn{
    display: block;
    width: 80%;
    margin: 0 auto;
}
}

</style>